<template>
  <div class="page-user-index">
    <el-row :gutter="35">
      <el-col :span="8">
        <div class="title">{{ lang.t('page.user.index.news') }}</div>
        <div class="news-box">
          <div class="news" v-for="(item, key) in newsData" :key="key" @click="onNewsOpen(item)">
            <div v-if="!key" class="on">
              <div class="title wrap">{{ item.title }}</div>
              <div class="time">{{ item.created_at }}</div>
            </div>
            <el-row v-else>
              <el-col :span="15">
                <div class="title wrap flash">{{ item.title }}</div>
              </el-col>
              <el-col :span="6" :offset="3">
                <div class="time">{{ item.created_at }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="title">{{ lang.t('page.user.index.version') }}</div>
        <div class="version-box">
          <el-timeline>
            <el-timeline-item
              v-for="(item, key) in versionData"
              :key="key"
              :timestamp="item.created_at"
              :type="versionMy == item.version ? 'primary' : ''"
              :size="versionMy == item.version ? 'large': 'normal'"
              hollow
            >
              <div class="version">{{ item.version }}</div>
              <div class="content">{{ item.content }}</div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="title">{{ lang.t('page.user.index.plugin') }}</div>
        <el-row :gutter="20">
          <el-col v-for="item in pluginModel.getList()" :key="item.id()" :md="8" :xl="6">
            <div class="plugin flash">
              <img :src="item.img()">
              <div class="name">{{ item.name() }}</div>
              <div class="content wrap">{{ item.content() }}</div>
              <i v-if="pluginCan(item.id())" class="iconfont icon-security my"></i>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import userModel from '@/model/user'
import pluginModel from '@/model/plugin'
import permissionModel from '@/model/permission'
import { news, version } from '@/api/manage'

export default {
  setup() {
    // 插件数据
    pluginModel.get()
    permissionModel.get(userModel.getData().permission)

    // 判断是否有插件权
    const pluginCan = (id) => {
      if(userModel.getData().plugin) {
        return userModel.getData().plugin.includes(id)
      }
    }

    // 版本日志
    const versionData = ref([])
    // 我的版本
    const versionMy = app.window.version()
    // 加载版本
    version().then(res => {
      versionData.value = res.data.map(item => {
        item.created_at = app.time.date(item.created_at)
        return item
      })
    })

    // 新闻公告
    const newsData = ref([])
    // 加载
    news().then(res => {
      newsData.value = res.data.map(item => {
        item.created_at = app.time.date(item.created_at)
        return item
      })
    })

    // 打开新闻
    const onNewsOpen = item => {
      app.ui.alert(item.content, item.title, { showConfirmButton: false })
    }

    return {
      lang: app.lang,
      pluginModel,
      pluginCan,
      versionData,
      versionMy,
      newsData,
      onNewsOpen
    }
  }
}
</script>